import {Component, OnInit} from '@angular/core';
import {InstalledCapacityRatioService} from '../../../service/installed-capacity-ratio.service';
import {DataSourceService} from '../../../service/data-source/data-source.service';

@Component({
  selector: 'app-installed-capacity-ratio',
  templateUrl: './installed-capacity-ratio.component.html',
  styleUrls: ['./installed-capacity-ratio.component.css'],
  providers: [DataSourceService]
})
export class InstalledCapacityRatioComponent implements OnInit {

  /**
   * 当前选中下标(1:厂家装机容量，2：型号装机容量)
   *
   * @type {number}
   * @memberof InstalledCapacityRatioComponent
   */
  active: number = 0;
  /**
   * 装机容量集合
   *
   * @type {number}
   * @memberof InstalledCapacityRatioComponent
   */
  installedCapacitys: InstalledCapacityRatio[] = [];
  modelName = []; //型号名称
  modelValue = [];
  manufactorName = []//厂家名称
  manufactorValue = [];
  name = [];
  value = [];
  private echartsIntance: any;
  public options: object;

  constructor(
    private dataSource: DataSourceService,
    private installedCapacityRatioService: InstalledCapacityRatioService
  ) {
  }

  ngOnInit() {
    this.initData();

    this.initOptions()

  }

  initData() {
    // this.installedCapacitys=[
    //   {"modelName":"GW87/1500","deviceCategoryId":0,"modelId":1,"factoryId":7,"factoryName":"a","capaCity":52.5},
    //   {"modelName":"S82-1500","deviceCategoryId":0,"modelId":40,"factoryId":6,"factoryName":"b","capaCity":148.5},
    //   {"modelName":"SL1500/82","deviceCategoryId":0,"modelId":47,"factoryId":5,"factoryName":"c","capaCity":348},
    //   {"modelName":"SL1500/90","deviceCategoryId":0,"modelId":43,"factoryId":5,"factoryName":"d","capaCity":34.5},
    //   {"modelName":"WD93","deviceCategoryId":0,"modelId":31,"factoryId":4,"factoryName":"e","capaCity":34},
    //   {"modelName":"CWT1500-D87","deviceCategoryId":0,"modelId":34,"factoryId":3,"factoryName":"f","capaCity":34.5},
    //   {"modelName":"SL1500/77","deviceCategoryId":0,"modelId":42,"factoryId":5,"factoryName":"a","capaCity":118.5},
    //   {"modelName":"SL1500","deviceCategoryId":0,"modelId":55,"factoryId":5,"factoryName":"b","capaCity":0},
    //   {"modelName":"SL1500/89","deviceCategoryId":0,"modelId":57,"factoryId":5,"factoryName":"c","capaCity":147},
    //   {"modelName":"SL1500/87","deviceCategoryId":0,"modelId":46,"factoryId":5,"factoryName":"d","capaCity":0},
    //   {"modelName":"SL3000/105","deviceCategoryId":0,"modelId":44,"factoryId":5,"factoryName":"e","capaCity":6},
    //   {"modelName":"W2000-93-80","deviceCategoryId":0,"modelId":30,"factoryId":2,"factoryName":"f","capaCity":48},
    //   {"modelName":"CWT1500-D93","deviceCategoryId":0,"modelId":41,"factoryId":3,"factoryName":"a","capaCity":16.5}];
    // this.installedCapacitys.forEach(o => {
    //       this.modelName.push(o.modelName)
    //       this.modelValue.push(o.capaCity)
    //     })

    //     //厂家
    //     let temp = this.classification(this.installedCapacitys);
    //     temp.forEach(t =>{
    //       this.manufactorName.push(t[0].factoryName);
    //       let sum = 0;
    //       t.forEach(o =>{
    //         sum+=o.capaCity
    //       })
    //       this.manufactorValue.push(sum)
    //     })
    //     this.name = this.manufactorName;
    //     this.value = this.manufactorValue;
    //     this.series[0].data = this.value;
    //     this.updateEchart();


    this.installedCapacityRatioService.getCapacity()
      .then(res => {
        if (!res) return;
        this.installedCapacitys = res;
        //型号
        this.installedCapacitys.forEach(o => {
          this.modelName.push(o.modelName)
          this.modelValue.push(o.capaCity)
        })

        //厂家
        let temp = this.classification(this.installedCapacitys);
        temp.forEach(t => {
          this.manufactorName.push(t[0].factoryName);
          let sum = 0;
          t.forEach(o => {
            sum += o.capaCity
          })
          this.manufactorValue.push(sum)
        })
        this.name = this.manufactorName;
        this.value = this.manufactorValue;
        this.series[0].data = this.value;
        this.xAxis[0].data = this.name;
        this.updateEchart();


      })
      .catch(err => {
        console.log(err)
      })
  }

  classification(aa) {
    var list = aa,
      flag = 0,
      data = [];
    for (var i = 0; i < list.length; i++) {
      let az: any = '';
      for (var j = 0; j < data.length; j++) {
        if (data[j][0].factoryName == list[i].factoryName) {
          flag = 1;
          az = j;
          break;
        }
      }
      if (flag == 1) {
        data[az].push(list[i]);
        flag = 0;
      } else if (flag == 0) {
        let wdy: any = new Array();
        wdy.push(list[i]);
        data.push(wdy);
      }
    }

    return data;

  }

  ngOnDestroy(): void {
    this.dataSource.dispose();
  }

  private series: any = [
    {
      name: '装机容量（MW）',
      type: 'bar',
      data: this.value,
      barWidth: '38%',
      barGap: '15%',
      itemStyle: {
        normal: {
          color: 'rgb(219,83,46)'
        }
      },
      label: {
        normal: {
          show: true,
          position: 'inside'
        }
      }

    }
  ]


  private xAxis: any = [
    {
      type: 'category',
      data: this.name,
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#43a0b3',
          fontSize: 12
        },
        margin: 10
      },
      axisLine: {
        lineStyle: {
          color: '#35789d',
          width: 2
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#1b4268'
        }
      }
    }
  ]

  initOptions() {
    // let pipe = this.datePipe;
    this.options = {
      tooltip: {
        trigger: 'axis',
        formatter: function (params, ticket, callback) {

          let result = params[0].name + '</br>';
          params.forEach((item) => {
            result += item.marker + item.seriesName + ':' + item.value + '</br>';
          });

          return result;
        }
      },
      legend: {
        data: [
          {
            // name: '装机容量（MW）',
            textStyle: {color: 'rgb(255,255,255)', fontSize: '18'}
          },
          // {
          // 	name: '风机负荷（MW）',
          // 	textStyle: { color: 'rgb(116,214,73)' }
          // }
        ],
      },
      grid: {
        left: '3%',
        right: '2%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: this.xAxis,
      yAxis: [
        {
          type: 'value',
          name: '单位：MW',
          min: 0,
          // interval: 50,
          axisLabel: {
            formatter: '{value}',
            show: true,
            textStyle: {
              color: '#43a0b3'
            },
            margin: 17
          },
          axisLine: {
            lineStyle: {
              color: '#35789d',
              width: 2
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#1b4268'
            }
          }
        }
      ],
      series: this.series
    };
  }

  /**
   * 点击厂家装机容量、型号装机容量
   * @param index d
   */
  onClickHeader(index) {
    this.active = index;
    if (index == 0) {
      //点击的是厂家装机容量
      this.name = this.manufactorName;
      this.value = this.manufactorValue;
      this.series[0].data = this.value;
      this.xAxis[0].data = this.name;
      this.updateEchart()

    } else {
      //点击的是型号装机容量

      this.name = this.modelName;
      this.value = this.modelValue;
      this.series[0].data = this.value;
      this.xAxis[0].data = this.name;
      this.updateEchart()

    }
  }

  //初始化图表数据
  onChartInit(ec: any) {
    this.echartsIntance = ec;
  }

  //更新图表数据
  updateEchart() {

    if (this.echartsIntance != null)
      this.echartsIntance.setOption(this.options);
  }


}


export interface InstalledCapacityRatio {
  modelName: string;
  deviceCategoryId: number;
  modelId: number;
  factoryId: number;
  factoryName: string;
  capaCity: number;
}


// WEBPACK FOOTER //
// ./src/app/module/data-analysis/installed-capacity-ratio/installed-capacity-ratio.component.ts
